<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编写一段程序，实现文本框获取和失去焦点效果。要求：1、获得焦点时，如果内部内容为提示语 请输入搜索关键字 ，清空内容并且设置文字颜色为黑色；2、失去焦点时，如果内容为空，恢复默认提示语，并且设置文字颜色为灰色</title>
</head>
<body>
  <input type="text" value="请输入搜索关键字" id="search">  
  <script>
      var search = document.getElementById("search");
      search.onfocus = function () {
          this.value = "";
          this.style.color = "black";
      }
      search.onblur = function () {
          if (this.value === "") {
            this.value = "请输入搜索关键字";
            this.style.color = "gray";
          }
      }
  </script>
</body>
</html>